<template>
	<view class="repair-details">
		<!-- 维修区域的信息 -->
		<view class="section">
			<text class="section-title">维修信息</text>
			<view class="info-item">
				<text class="label">维修单号: </text>
				<text class="value">{{number}}</text>
			</view>
			<view class="info-item">
				<text class="label">车主姓名: </text>
				<text class="value">{{userName}}</text>
			</view>
			<view class="info-item">
				<text class="label">联系方式: </text>
				<text class="value">{{phone}}</text>
				<image class="info-img" src="/static/repair/repairTask/电话.png" mode="widthFix" @click="callPhone">
				</image>
			</view>
			<view class="info-item">
				<text class="label">维修方式: </text>
				<text class="value">{{type===0?'到店维修':(type===1)?'上门取车':''}}</text>
			</view>
			<view class="info-item" v-if="type===1">
				<text class="label">取车位置: </text>
				<text class="value">{{position}}</text>
				<image class="info-img" src="/static/repair/repairTask/plane.png" mode="widthFix"
					@click="openNavigation"></image>
			</view>
			<view class="info-item">
				<text class="label">预约日期: </text>
				<text class="value">{{bookingDate}}</text>
			</view>
			<view class="info-item">
				<text class="label">提交日期: </text>
				<text class="value">{{submitDate}}</text>
			</view>
		</view>

		<!-- 车辆信息区域 -->
		<view class="section">
			<text class="section-title">车辆信息</text>
			<view class="info-item">
				<text class="label">车辆类型: </text>
				<text class="value">{{model===0?'油车':(model===1)?'新能源':''}}</text>
			</view>
			<view class="info-item">
				<text class="label">车牌号: </text>
				<text class="value">{{carNumber}}</text>
			</view>
			<view class="info-item">
				<text class="label">整车照片:</text>
				<image class="car-img" :src="carImg" mode="widthFix"></image>
			</view>
			<view class="info-item">
				<text class="label">维修部位: </text>
				<view class="img-group">
					<image class="repair-img" :src="repairImg" mode="widthFix"></image>
					<image class="repair-img" :src="repairImg" mode="widthFix"></image>
					<image class="repair-img" :src="repairImg" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 优化后的状态按钮：根据status切换文本和样式 -->
		<button
			:class="{'status-reserved': status === 0, 'status-repairing': status === 1, 'status-completed': status === 2}"
			@click="handleStatusChange">
			{{ status === 0 ? '确认到场' : status === 1 ? '维修中' : '已完成' }}
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 维修单号 */
				number: '12332112',
				userName: '张哲然',
				phone: '15037939680',
				type: 1,
				position: '郑州市中原区莲花街77号',
				bookingDate: '2025-08-30',
				submitDate: '2025-08-28',
				model: 1,
				carNumber: '豫C·071EQ',
				carImg: '/static/repair/repairTask/xiaoqiche.jpg',
				repairImg: '/static/repair/repairTask/xiaoqiche.jpg',
				// 新增status状态变量：0=已预约，1=维修中，2=已完成（默认初始状态为已预约）
				status: 0
			}
		},
		methods: {
			callPhone() {
				uni.showToast({
					title: '拨打了' + this.phone + '电话',
					icon: 'success'
				})
			},
			// 打开导航逻辑（示例：调用地图API）
			openNavigation() {
				uni.openLocation({
					latitude: 35.24, // 实际取车位置纬度
					longitude: 113.35, // 实际取车位置经度
					name: '山阳区32号',
					address: '取车位置',
				});
			},
			// 优化后的状态切换逻辑
			handleStatusChange() {
				switch (this.status) {
					// 状态0（已预约）→ 点击切换到状态1（维修中）
					case 0:
						this.status = 1;
						uni.showToast({
							title: '已确认到场，车辆进入维修',
							icon: 'success'
						});
						// 可补充：调用后端接口，同步“维修中”状态
						// this.updateOrderStatus(1);
						break;
						// 状态1（维修中）→ 点击切换到状态2（已完成）
					case 1:
						this.status = 2;
						uni.showToast({
							title: '维修已完成',
							icon: 'success'
						});
						// 可补充：调用后端接口，同步“维修完成”状态
						// this.updateOrderStatus(2);
						break;
						// 状态2（已完成）→ 再次点击提示“已完成”
					case 2:
						uni.showToast({
							title: '该订单已完成维修',
							icon: 'none'
						});
						break;
				}
			}
		}
	}
</script>

<style>
	.repair-details {
		padding: 20rpx;
		background-color: #fff;
	}

	.section {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		width: 160rpx;
	}

	.value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.info-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.car-img {
		width: 200rpx;
		height: 120rpx;
		margin-top: 10rpx;
	}

	.img-group {
		display: flex;
		margin-top: 10rpx;
	}

	.repair-img {
		width: 150rpx;
		height: 100rpx;
		margin-right: 15rpx;
	}

	/* 按钮基础样式：统一尺寸、边距和字体 */
	button {
		width: 90%;
		margin: 40rpx auto;
		font-size: 32rpx;
		border-radius: 10rpx;
		/* padding: 16rpx 0; */
		/* 优化内边距，提升点击区域舒适度 */
	}

	/* 1. 已预约状态按钮样式（status=0） */
	.status-reserved {
		background-color: #e3f2fd;
		/* 浅蓝色背景，柔和不刺眼 */
		color: #1976d2;
	}

	/* 2. 维修中状态按钮样式（status=1） */
	.status-repairing {
		background-color: #fff3e0;
		color: #ff9800;
	}

	/* 3. 已完成状态按钮样式（status=2） */
	.status-completed {
		background-color: #e8f5e9;
		color: #4caf50;
	}
</style>